<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from "vue";

const flag: Ref<boolean> = ref(true)


function isShow() {
    flag.value = !flag

}

function service() {
    window._MEIQIA('showPanel')
    window._MEIQIA('metadata', {
        address: '哈尔滨',
        age: 20,
        comment: 'hhhh', // 备注
        email: '2048070277@qq.com',// 邮箱
        gender: '男',// 性别
        name: '赵四',// 名字
        qq: '2042870377', // QQ
        tel: '12345678912',// 电话
        weibo: 'qqqqqqqq.com',// 微博
        weixin: '14567826782',// 微信
        contact: '张三' // 联系人
    })
}
</script>



<template>
    <div>
        <div class="tittle">
            <van-nav-bar title="消息(3)" left-text="返回" left-arrow @click-left="$router.push('/shouye')">
                <template #right>
                    <p v-show="flag" @click="isShow">
                        全部已读
                    </p>
                </template>
            </van-nav-bar>

        </div>

        <div class="list">
            <ul>
                <li @click="service">
                    <img src="../../assets/kefu.png" alt="">
                    <div class="aside">
                        <p class="first">
                            <span>官方客服</span><a href="">刚刚</a>
                        </p>
                        <p class="second">您好,我是官方客服,请把您的问题告诉我吧</p>
                    </div>
                </li>
                <li @click="$router.push('/logistics')">
                    <img src="../../assets/wuliu.png" alt="">
                    <div class="aside">
                        <p class="first">
                            <span>订单物流状态更新</span><a href="">昨天</a>
                        </p>
                        <p class="second">顺主速运 SF12321413413252135</p>
                    </div>
                </li>
                <li @click="$router.push('/money')">
                    <img src="../../assets/youhui.png" alt="">
                    <div class="aside">
                        <p class="first">
                            <span>优惠通知</span><a href="">2023-3-17</a>
                        </p>
                        <p class="second">您有一张优惠券即将过期快起使用吧</p>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</template>
<style scoped lang="scss">
.title {
    height: 0.44rem;
    border-bottom: 1px solid #f1f3f5;
    position: relative;
}

.title p {
    transition: 2s all;
}

.list {
    width: 100%;
    /* background-color: aquamarine; */
}


.list li {
    border-bottom: 1px solid #f1f3f5;
    display: flex;
    padding: 0.2rem 0.1rem;
}

.list li img {
    margin-right: 0.2rem;
}

.list li .aside {
    flex: 1;
}

.list li .aside .first {
    display: flex;
    justify-content: space-between;


}

.list li .aside .first span {
    font-size: 16px;
}

.list li .aside .first a {
    color: #adb5bd;
}
</style>